<template>
	<view class="page">
		<view class="p-list">
			<singleList ref="listRef" url="money.money_log" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{ list }">
					<empty v-if="sRes && sRes==='empty'" marginTop="200rpx"></empty>
					<block v-for="(item, i) in list" :key="i">
						<view class="item-wrap">
							<view class="i-top align-center">
								<view class="i-l flex-col justify-center">
									<view class="title">{{item.log_text}}</view>
									<view class="time">{{showDate(item.createtime)}}</view>
								</view>
								<view class="i-r flex-col justify-center">
									<text class="price clamp">{{item.change_value}}</text>
									<view class="remain">{{item.remain}}</view>
								</view>
								
							</view>
							<view class="i-bom" v-if="item.remark">
								备注：{{item.remark}}
							</view>
						</view>
					 </block>
				</template>
			</singleList> 
			
		</view>
	</view>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  nextTick,
  // watchEffect,
} from 'vue';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
const record = defineComponent({
	components:{
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			reqData: {},
			sRes:'',
		})
		const listRef = ref();
		onLoad(e => {
			nextTick(() => {
				// data.reqData = {
				// 	status: data.tabs[data.tabCurIdx].status
				// };
				listRef.value.getList(true);
			});
		});
		onPullDownRefresh(()=>{
			listRef.value.getList(true);
			uni.stopPullDownRefresh();
		})
		onReachBottom(()=>{
			listRef.value.getList();
		})
		const searchEnd =({loadingType,pageOneRes})=>{
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				data.sRes='empty';
			}else{
				data.sRes=loadingType;
			}
		}
		const showDate = (timestamp)=>{
			return uni.$tools.date('Y/m/d H:i',timestamp)
		}
		return {
			...toRefs(data),
			listRef,
			searchEnd,
			showDate,
		};
	}
})
export default record;
</script>

<style lang="scss">
page{
	background-color: #f7f7f7;
}
.page{
	padding: 20rpx;
}
.item-wrap{
	width: 710rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	.i-top{
		padding: 0 24rpx;
		height: 120rpx;
		.title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.time{
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.i-r{
			margin-left: auto;
		}
		.price{
			margin-left: auto;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF162C;
			max-width: 300rpx;
		}
		.remain{
			margin-top: 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
    .i-bom{
		padding: 22rpx 24rpx;
		border-top: 2rpx solid #eee;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 38rpx;
	}
}
</style>
